<template>
  <div class="custom-tree-container">
    <div class="block">
      <p>组织机构管理</p>
      <el-tree
        :data="data"
        node-key="id"
        default-expand-all
        :expand-on-click-node="false">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <div>
          <span>{{ node.label }}</span>
          <div class="opBtn">
            <el-button
              type="text"
              size="mini"
              @click="() => append(node,data)">
              新增子菜单
            </el-button>
            <el-button
              v-if="data.id != -1"
              type="text"
              size="mini"
              @click="() => updateOrg(data)">
              修改
            </el-button>
            <el-button
              v-if="data.id != -1"
              type="text"
              size="mini"
              @click="() => deleteOrg(data.id)">
              删除
            </el-button>
          </div>
        </div>
      </span>
      </el-tree>
    </div>

    <el-dialog
      :visible.sync="show"
      :title="!isUpdate ? '新增' : '编辑'"
      width="860px"
      @close="dialogClose">
      <el-form
        ref="editForm"
        label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="组织机构名称">
              <el-input v-model="orgName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" :offset="4">
            <el-button type="primary" @click="save">立即创建</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {getTreeByParent,insert,update,del} from '@/api/orgInfo'
export default {
  name: "orgInfo",
  data() {
      const data = [{
        id: 1,
        label: '一级 1',
        children: [{
          id: 4,
          label: '二级 1-1',
          children: [{
            id: 9,
            label: '三级 1-1-1'
          }, {
            id: 10,
            label: '三级 1-1-2'
          }]
        }]
      }, {
        id: 2,
        label: '一级 2',
        children: [{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 6,
          label: '二级 2-2'
        }]
      }, {
        id: 3,
        label: '一级 3',
        children: [{
          id: 7,
          label: '二级 3-1'
        }, {
          id: 8,
          label: '二级 3-2'
        }]
      }];
    return {
      editId:null,
      show: false,
      data: JSON.parse(JSON.stringify(data)),
      orgName: '',
      isUpdate: false
    }
  },
  mounted(){
    this.getData();
  },
  methods: {
    append(node,data) {
      this.show = true;
      this.editId = data.id;
      this.isUpdate = false;
    },
    updateOrg(data) {
      this.show = true;
      this.editId = data.id;
      this.orgName = data.label;
      this.isUpdate = true;
    },
    remove(node, data) {
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex(d => d.id === data.id);
      children.splice(index, 1);
    },
    deleteOrg(id) {
      let _this =this;
      this.$confirm('确定要删除选中数据吗？', '删除', {
        comfirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        del(id).then(function (data) {
          if (data.code == 200){
            _this.$message.success('删除成功');
            _this.getData()
          } else{
            _this.$message.error(data.message);
          }
        })
        return false;
      });
    },
    dialogClose() {
      // 清空编辑表单
      this.show = false;
      this.editId = null;
      this.isUpdate = false;
      // 刷新数据
      this.getData();
    },
    showEdit(id) {
      this.editId = id;
      this.show = true;
    },
    getData() {
      let _this = this;
      getTreeByParent("-1").then(function (data) {
        if (data.code == 200){
          // _this.$set(_this.data,data.data);
          _this.data = data.data;
        } else{
          _this.$message.error(data.message);
        }
      })
    },
    save(){
      let _this = this;
      (_this.isUpdate ?(update):(insert))({"orgName":this.orgName, "orgId":this.editId}).then(function (data) {
        if (data.code == 200){
          _this.orgName = null;
          _this.editId = null;
          _this.$message.success(_this.isUpdate ? '编辑成功' : '新增成功');
          _this.dialogClose();
        } else{
          _this.$message.error(data.message);
        }
      })
    },
  }
}
</script>

<style scoped lang="less">
.el-form {
  padding: 0 10px;
}
.el-date-editor {
  width: 100% !important;
}
.el-pagination{
  margin-top: 10px;
  float: left;
}
.tool_style{
  padding: 10px 0;
}
.opBtn{
  display: inline-block;
  margin-left: 40px;
}
</style>
